<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/admin/plugin/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
    <script src="/admin/plugin/layui/dist/layui.js" charset="utf-8"></script>

    <script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/mx1.0.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/mx1.0.1.js"></script>

    <title>高级检索</title>
</head>
<body>

<div id="app">
    <form class="layui-form" action="" lay-filter="formData">
        <table class="layui-table">
            <tr v-for="item in columns">
                <td><label class="layui-form-label" style="margin-right: 0px;">{{item.lable}}</label></td>
                <td>
                    <select name="col_style" v-model="searchInputDtos[item.key].type" class="layui-input" style="display: block;height: 31px;" >
                        <option value="0">包含</option>
                        <option value="2">不等于</option>
                        <option value="1">大于小于</option>
                        <option value="6">等于</option>
                        <option value="8">=等于</option>
                    </select>
                </td>
                <td>
                    <div class="layui-input-block" style="margin-left: 0px;">
                        <input type="text" v-if="searchInputDtos[item.key].type == '0'" v-model="searchInputDtos[item.key].value" :name="item.key" required  lay-verify="required" :placeholder="'请输入'+item.lable" autocomplete="off" class="layui-input">
                        <input type="text" v-if="searchInputDtos[item.key].type == '1'" v-model="searchInputDtos[item.key].searchTypeForDateDto.start" :name="item.key" required  lay-verify="required" :placeholder="'请输入开始值'" autocomplete="off" class="layui-input">
                        <input type="text" v-if="searchInputDtos[item.key].type == '1'" v-model="searchInputDtos[item.key].searchTypeForDateDto.end" :name="item.key" required  lay-verify="required" :placeholder="'请输入结束值'" autocomplete="off" class="layui-input">

                        <select  v-if="searchInputDtos[item.key].type == '6' && searchInputDtos[item.key].selectoptions!=0" v-model="searchInputDtos[item.key].value"  class="layui-input" style="display: block;height: 31px;" >
                            <option></option>
                            <option :value="opv.value" v-for="opv in searchInputDtos[item.key].searchTypeForSelectDtos">{{opv.showValue}}</option>
                        </select>

                        <select  v-if="searchInputDtos[item.key].type == '8' && searchInputDtos[item.key].selectoptions!=0" v-model="searchInputDtos[item.key].value"  class="layui-input" style="display: block;height: 31px;" >
                            <option></option>
                            <option :value="opv.value" v-for="opv in searchInputDtos[item.key].searchTypeForSelectDtos">{{opv.showValue}}</option>
                        </select>

                        <input type="text" v-if="searchInputDtos[item.key].type == '6'  && searchInputDtos[item.key].selectoptions==0" v-model="searchInputDtos[item.key].value" :name="item.key" required  lay-verify="required" :placeholder="'请输入'+item.lable" autocomplete="off" class="layui-input">

                    </div>
                </td>
            </tr>
        </table>
    </form>

</div>

<script>
    var form = null;
    var $ = null;
    var vm = new Vue({
        el: '#app',
        data: {
            columns:[],
            searchInputDtos:{},
            tableId:"",
            parmsData : {},
        },
        created(){
            this.parmsData = getParams();
            if(this.parmsData.tableId != undefined && this.parmsData.tableId != null){
                this.tableId = this.parmsData.tableId;
            }else {
                this.tableId = top.data.tableId;
            }
            this.init();
        },
        methods:{
            init(){
                layui.use(['form','jquery'], function(){
                    form = layui.form;
                    $ = layui.jquery;
                    post("/admin/api/DataManagementController/getInputadvancedRetrievalDisplayFields",{id:vm.tableId},function (resData) {
                        vm.columns = resData.data.listdata;
                        console.log(resData.data.listdata);
                        vm.searchInputDtos = resData.data.searchDto;
                        vm.$nextTick(function () {
                            form = layui.form;
                        });
                    })
                    //监听提交
                    form.on('submit(*)', function(data){
                        layer.msg(JSON.stringify(data.field));
                        return false;
                    });
                });
            }
        }
    })

    function getData() {
        let data = vm.searchInputDtos;
        return data;
    }
</script>
</body>
</html>
